<template>
    <body style="position: fixed">
    <div class="mod-login">
        <form action="index.html">
            <div class="mod-form">
                <div class="form-item">
                    <span class="form-label">用户名：</span>

                    <div class="user-text">
                        <label class="user-icon" style="margin-top: -2px"></label>
                        <input type="text" class="input-style" v-model="loginForm.username" style="margin-top: -15px"/>
                    </div>
                </div>
                <div class="form-item">
                    <span class="form-label">密　码：</span>
                    <div class="user-text">
                        <label class="psw-icon" style="margin-top: -1px"></label>
                        <input type="password" v-model="loginForm.password" class="input-style"
                               style="margin-top: -15px"/>
                    </div>
                </div>
                <div class="form-item">
                    <span class="form-label">验证码：</span>
                    <div class="user-text code">
                        <label class="code-icon" style="margin-top: -1px">
                        </label><input type="text" class="input-style" v-model="codeInput" style="margin-top: -15px"/>
                        <div @click="refreshCode" style="margin-top: -12px;cursor: pointer" class="code-img">
                            <identify :identifyCode="identifyCode"></identify>
                        </div>
                    </div>
                </div>
                <div class="form-btn">
                    <input type="submit" @click.prevent="handleLogin" class="sub-btn" value="登录"/>
                    <input type="reset" @click.prevent="resert" class="reset-btn" value="重置"/></div>
            </div>
            <div class="footer">版权所有Copyright@2023,All Rights Reserved</div>
        </form>
    </div>
    </body>

</template>

<script>
import identify from '@/views/login/identify'
import {removeWatermark} from '@/utils/watermark'
import {login} from "@/api/login";
import {setRoutes} from "@/router";

export default {
    name: 'Login',
    components: {
        identify
    },
    data() {
        const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error('The password can not be less than 6 digits'))
            } else {
                callback()
            }
        }
        return {
            loginForm: {
                username: '',
                password: ''
            },
            identifyCode: '',
            codeInput: '',
            loginRules: {
                username: [{required: true, trigger: 'blur', message: '请输入用户名',}],
                password: [{required: true, trigger: 'blur', message: '请输入密码'}]
            },
            loading: false,
            passwordType: 'password',
            redirect: undefined
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true
        }
    },
    mounted() {
        removeWatermark()
        this.refreshCode()
    },
    methods: {

        refreshCode() {
            var numCode = "";
            for (var i = 0; i < 4; i++) {
                numCode += Math.floor(Math.random() * 10);
            }

            this.identifyCode = numCode;
            // this.identifyCode = "";
        },
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        resert() {
            this.loginForm.username = ''
            this.loginForm.password = ''
        },
        async handleLogin() {
            if (this.loginForm.password.trim() != '' && this.loginForm.username.trim() != '') {
                if (this.codeInput == '') {
                    this.$message.error("请输入验证码")
                } else if (this.codeInput != this.identifyCode) {
                    this.$message.error("验证码错误")
                    this.refreshCode();
                } else {
                    this.loading = true
                    let res = await login(this.loginForm)
                    if (res.data.code === 200){
                        let resData = res.data.data
                        let userInfo= {
                            userId: resData.users.userId,
                            userName: resData.users.usersName,
                            roleId: resData.users.roleId,
                        }
                        let menuList = resData.menuList
                        let token = resData.token
                        const now = new Date()
                        const expirationTime = new Date(now.getTime() + 60*60*1000*24)

                        // 保存token和菜单数组
                        localStorage.setItem("token",token)
                        localStorage.setItem("menuList",JSON.stringify(menuList))
                        localStorage.setItem("userinfo",JSON.stringify(userInfo))
                        localStorage.setItem("tokenExpiration", expirationTime.getTime().toString())
                        localStorage.setItem("orgName",resData.orgName);

                        this.$store.commit('user/setToken',token);
                        this.$store.commit('user/setMenuList',menuList);
                        this.$store.commit('user/setUserinfo',userInfo);
                        this.$store.commit('user/setTokenExpiration',expirationTime.getTime().toString());
                        // 动态生成路由
                        setRoutes()
                        debugger
                        this.$router.push({path:"/"})
                        debugger
                        this.loading = false

                    }else if (res.data.code === 10002) {
                        this.$router.push({path:"/changePwd"})
                    }else {
                        this.$message.error(res.data.msg)
                    }
                    // this.$store.dispatch('user/login', this.loginForm).then(() => {
                    //     this.$router.push({path: '/'})
                    //     this.loading = false
                    //     // location.reload();
                    // }).catch((msg) =>  {
                    //     alert(msg)
                    //     this.refreshCode();
                    //     this.loading = false
                    // })
                }
            } else {
                this.$message.error("请确保登录信息完整！！！")
            }
        }
    }
}
</script>

<style scoped="scoped">

/* CSS Document */
.thebody, body {
    background-image: url(~@/assets/login/login_bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    width: 100%;
    height: 100%;

    /*background: url(~@/assets/login/login_bg.jpg) no-repeat center center fixed;*/
    /*-webkit-background-size: cover;*/
    /*-moz-background-size: cover;*/
    /*-o-background-size: cover;*/
    /*background-size: cover;*/

    /*background:#066FB2 url(~@/assets/login/login_bg.jpg) no-repeat top center;*/
}

body, form, input, ul, li, h1, h2 {
    margin: 0;
    padding: 0;
}

body, button, input, select, textarea {
    font: 12px/1.5 "宋体", "Arial Narrow", HELVETICA;
    color: #404040;
}

ol, ul {
    list-style: none;
}

img, input, label, select {
    border: 0;
    vertical-align: middle;
}

input, select, textarea {
    outline: none;
    background: none;
}

.mod-login {
    width: 850px;
    height: 490px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -245px -425px;
    background: url(~@/assets/login/login_form_bg.png) no-repeat;
}

.mod-form {
    width: 340px;
    margin: 155px auto 0 auto;
}

.form-item {
    height: 28px;
    line-height: 28px;
    margin-bottom: 10px;
}

.form-label {
    width: 50px;
    float: left;
}

.user-text {
    width: 245px;
    height: 22px;
    padding: 3px 10px 3px 25px;
    float: left;
    position: relative;
    background: url(~@/assets/login/mod_login.png) no-repeat;
}

.code {
    background-position: 0 -28px;
}

.user-text label {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 5px;
    top: 5px;
    background: url(~@/assets/login/login_icon.png) no-repeat;
}

.user-text .user-icon {
    background-position: 0 0;
}

.user-text .psw-icon {
    background-position: 0 -16px;
}

.user-text .code-icon {
    background-position: 0 -32px;
}

.code-img {
    position: absolute;
    left: 150px;
    top: 0;
}

.input-style {
    width: 245px;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    font-weight: bold;
}

.code .input-style {
    width: 100px;
}

.form-btn {
    padding-left: 50px;
}

.sub-btn {
    width: 80px;
    height: 30px;
    color: #FFF;
    background: url(~@/assets/login/mod_login.png) no-repeat 0 -56px;
}

.reset-btn {
    width: 80px;
    height: 30px;
    color: #333;
    margin-left: 10px;
    background: url(~@/assets/login/mod_login.png) no-repeat -80px -56px;
}

.footer {
    text-align: center;
    margin-top: 80px;
    color: #B8D9EA;
}
</style>
